<template>
	<view class="departments-page">
		<!-- 导航栏 -->
		<u-navbar title="医院科室介绍" bg-color="#1976d2" title-color="#ffffff" left-icon-color="#ffffff"></u-navbar>

		<!-- 科室内容容器 -->
		<view class="departments-container">
			<u-parse :html="departmentsContent"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				departmentsContent: `
        <div class="dept-header">
          <img src="https://picsum.photos/750/280" alt="医院科室导览图" style="width:100%;border-radius:12rpx;margin-bottom:30rpx;" />
          <h1 style="text-align:center;color:#1976d2;font-size:42rpx;margin-bottom:15rpx;">赛博医馆科室介绍</h1>
          <p style="text-align:center;color:#666;font-size:28rpx;">专业的医疗团队，为您的健康保驾护航</p>
        </div>

        <!-- 科室导航 -->
        <div class="dept-tabs" style="display:flex;overflow-x:auto;padding:15rpx 0;margin:25rpx 0;-webkit-overflow-scrolling:touch;">
          <span style="white-space:nowrap;background:#e3f2fd;color:#1976d2;padding:12rpx 25rpx;border-radius:30rpx;margin:0 10rpx;font-size:28rpx;">内科系列</span>
          <span style="white-space:nowrap;background:#e3f2fd;color:#1976d2;padding:12rpx 25rpx;border-radius:30rpx;margin:0 10rpx;font-size:28rpx;">外科系列</span>
          <span style="white-space:nowrap;background:#e3f2fd;color:#1976d2;padding:12rpx 25rpx;border-radius:30rpx;margin:0 10rpx;font-size:28rpx;">妇儿系列</span>
          <span style="white-space:nowrap;background:#e3f2fd;color:#1976d2;padding:12rpx 25rpx;border-radius:30rpx;margin:0 10rpx;font-size:28rpx;">医技科室</span>
          <span style="white-space:nowrap;background:#e3f2fd;color:#1976d2;padding:12rpx 25rpx;border-radius:30rpx;margin:0 10rpx;font-size:28rpx;">专科门诊</span>
        </div>

        <!-- 心血管内科 -->
        <div class="dept-card" style="background:#ffffff;border-radius:15rpx;box-shadow:0 2rpx 15rpx rgba(0,0,0,0.05);padding:30rpx;margin-bottom:30rpx;">
          <h2 style="color:#1976d2;font-size:36rpx;margin-bottom:20rpx;padding-bottom:15rpx;border-bottom:1px solid #f0f0f0;">
            <i style="display:inline-block;width:40rpx;height:40rpx;background:#1976d2;color:white;border-radius:50%;text-align:center;line-height:40rpx;margin-right:10rpx;">1</i>
            心血管内科
          </h2>
          
          <div style="display:flex;flex-wrap:wrap;margin-bottom:20rpx;">
            <img src="https://picsum.photos/320/220?1" alt="心血管内科诊室" style="width:48%;border-radius:10rpx;" />
            <div style="width:50%;margin-left:2%;">
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">国家级临床重点专科，拥有医护人员68人，其中主任医师8人，副主任医师12人，博士研究生导师3人。</p>
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">年门诊量超过15万人次，住院患者8000余人次，手术量3500余例。</p>
            </div>
          </div>
          
          <div style="margin-bottom:15rpx;">
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">诊疗范围：</h3>
            <p style="color:#666;line-height:1.7;">冠心病、心力衰竭、心律失常、高血压、心肌病、先天性心脏病、心脏瓣膜病等各类心血管疾病的诊断与治疗。</p>
          </div>
          
          <div>
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">特色技术：</h3>
            <ul style="padding-left:30rpx;color:#666;">
              <li style="line-height:1.7;margin-bottom:8rpx;">冠状动脉介入治疗（支架植入术）</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">心脏起搏器植入术</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">心脏电生理检查及射频消融术</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">先天性心脏病介入封堵术</li>
            </ul>
          </div>
        </div>

        <!-- 骨科 -->
        <div class="dept-card" style="background:#ffffff;border-radius:15rpx;box-shadow:0 2rpx 15rpx rgba(0,0,0,0.05);padding:30rpx;margin-bottom:30rpx;">
          <h2 style="color:#1976d2;font-size:36rpx;margin-bottom:20rpx;padding-bottom:15rpx;border-bottom:1px solid #f0f0f0;">
            <i style="display:inline-block;width:40rpx;height:40rpx;background:#1976d2;color:white;border-radius:50%;text-align:center;line-height:40rpx;margin-right:10rpx;">2</i>
            骨科
          </h2>
          
          <div style="display:flex;flex-wrap:wrap;margin-bottom:20rpx;">
            <img src="https://picsum.photos/320/220?2" alt="骨科手术室" style="width:48%;border-radius:10rpx;" />
            <div style="width:50%;margin-left:2%;">
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">省级重点专科，分为脊柱外科、关节外科、创伤骨科、手足外科四个专业组，医护人员76人。</p>
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">拥有先进的数字化骨科手术导航系统和康复设备，年手术量超过5000例。</p>
            </div>
          </div>
          
          <div style="margin-bottom:15rpx;">
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">诊疗范围：</h3>
            <p style="color:#666;line-height:1.7;">脊柱疾病、关节疾病、骨折创伤、骨肿瘤、骨质疏松、运动损伤、手足外科疾病等。</p>
          </div>
          
          <div>
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">特色技术：</h3>
            <ul style="padding-left:30rpx;color:#666;">
              <li style="line-height:1.7;margin-bottom:8rpx;">人工全髋关节置换术、人工全膝关节置换术</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">脊柱微创手术、椎间盘突出症微创治疗</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">复杂骨折的切开复位内固定术</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">关节镜下微创手术（肩、膝、踝等）</li>
            </ul>
          </div>
        </div>

        <!-- 妇产科 -->
        <div class="dept-card" style="background:#ffffff;border-radius:15rpx;box-shadow:0 2rpx 15rpx rgba(0,0,0,0.05);padding:30rpx;margin-bottom:30rpx;">
          <h2 style="color:#1976d2;font-size:36rpx;margin-bottom:20rpx;padding-bottom:15rpx;border-bottom:1px solid #f0f0f0;">
            <i style="display:inline-block;width:40rpx;height:40rpx;background:#1976d2;color:white;border-radius:50%;text-align:center;line-height:40rpx;margin-right:10rpx;">3</i>
            妇产科
          </h2>
          
          <div style="display:flex;flex-wrap:wrap;margin-bottom:20rpx;">
            <img src="https://picsum.photos/320/220?3" alt="妇产科病房" style="width:48%;border-radius:10rpx;" />
            <div style="width:50%;margin-left:2%;">
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">集医疗、教学、科研为一体的省级重点专科，分为妇科、产科、计划生育三个专业。</p>
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">年门诊量18万人次，年分娩量超过8000例，拥有层流净化产房和新生儿监护室。</p>
            </div>
          </div>
          
          <div style="margin-bottom:15rpx;">
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">诊疗范围：</h3>
            <p style="color:#666;line-height:1.7;">妇科肿瘤、妇科炎症、月经失调、不孕不育、高危妊娠管理、正常及异常分娩、计划生育等。</p>
          </div>
          
          <div>
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">特色技术：</h3>
            <ul style="padding-left:30rpx;color:#666;">
              <li style="line-height:1.7;margin-bottom:8rpx;">腹腔镜、宫腔镜微创手术</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">妇科恶性肿瘤规范化治疗</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">无痛分娩技术、导乐陪伴分娩</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">高危妊娠管理与救治</li>
            </ul>
          </div>
        </div>

        <!-- 儿科 -->
        <div class="dept-card" style="background:#ffffff;border-radius:15rpx;box-shadow:0 2rpx 15rpx rgba(0,0,0,0.05);padding:30rpx;margin-bottom:30rpx;">
          <h2 style="color:#1976d2;font-size:36rpx;margin-bottom:20rpx;padding-bottom:15rpx;border-bottom:1px solid #f0f0f0;">
            <i style="display:inline-block;width:40rpx;height:40rpx;background:#1976d2;color:white;border-radius:50%;text-align:center;line-height:40rpx;margin-right:10rpx;">4</i>
            儿科
          </h2>
          
          <div style="display:flex;flex-wrap:wrap;margin-bottom:20rpx;">
            <img src="https://picsum.photos/320/220?4" alt="儿科诊室" style="width:48%;border-radius:10rpx;" />
            <div style="width:50%;margin-left:2%;">
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">分为小儿内科、新生儿科、儿童保健科，医护人员58人，开放床位120张。</p>
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">设有儿科急诊24小时值班，年门诊量20万人次，住院患者6000余人次。</p>
            </div>
          </div>
          
          <div style="margin-bottom:15rpx;">
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">诊疗范围：</h3>
            <p style="color:#666;line-height:1.7;">儿童呼吸系统疾病、消化系统疾病、神经系统疾病、新生儿疾病、儿童传染病、儿童保健等。</p>
          </div>
          
          <div>
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">特色技术：</h3>
            <ul style="padding-left:30rpx;color:#666;">
              <li style="line-height:1.7;margin-bottom:8rpx;">新生儿重症监护（NICU）</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">儿童哮喘规范化诊疗</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">儿童行为发育评估与干预</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">儿童慢性病管理</li>
            </ul>
          </div>
        </div>

        <!-- 影像科 -->
        <div class="dept-card" style="background:#ffffff;border-radius:15rpx;box-shadow:0 2rpx 15rpx rgba(0,0,0,0.05);padding:30rpx;margin-bottom:30rpx;">
          <h2 style="color:#1976d2;font-size:36rpx;margin-bottom:20rpx;padding-bottom:15rpx;border-bottom:1px solid #f0f0f0;">
            <i style="display:inline-block;width:40rpx;height:40rpx;background:#1976d2;color:white;border-radius:50%;text-align:center;line-height:40rpx;margin-right:10rpx;">5</i>
            影像科
          </h2>
          
          <div style="display:flex;flex-wrap:wrap;margin-bottom:20rpx;">
            <img src="https://picsum.photos/320/220?5" alt="影像科设备" style="width:48%;border-radius:10rpx;" />
            <div style="width:50%;margin-left:2%;">
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">由放射、CT、核磁共振、超声四个专业组成，拥有医护技人员45人，其中高级职称12人。</p>
              <p style="color:#666;line-height:1.7;margin-bottom:15rpx;">配备3.0T核磁共振、64排螺旋CT、数字化X光机等先进设备，年检查量超过30万人次。</p>
            </div>
          </div>
          
          <div style="margin-bottom:15rpx;">
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">检查项目：</h3>
            <p style="color:#666;line-height:1.7;">全身各部位X线检查、CT平扫与增强扫描、核磁共振平扫与增强扫描、各种超声检查等。</p>
          </div>
          
          <div>
            <h3 style="font-size:30rpx;color:#333;margin-bottom:10rpx;">特色技术：</h3>
            <ul style="padding-left:30rpx;color:#666;">
              <li style="line-height:1.7;margin-bottom:8rpx;">CT血管成像（CTA）、磁共振血管成像（MRA）</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">磁共振弥散加权成像（DWI）</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">超声造影、弹性成像技术</li>
              <li style="line-height:1.7;margin-bottom:8rpx;">数字化乳腺摄影检查</li>
            </ul>
          </div>
        </div>

        <!-- 科室就诊提示 -->
        <div style="background:#e3f2fd;padding:25rpx;border-radius:12rpx;margin-top:40rpx;">
          <h3 style="color:#1976d2;font-size:30rpx;margin-bottom:15rpx;">就诊指南</h3>
          <p style="line-height:1.7;color:#555;margin-bottom:10rpx;">1. 各科室门诊时间：周一至周五 8:00-17:30，周六至周日 8:00-12:00</p>
          <p style="line-height:1.7;color:#555;margin-bottom:10rpx;">2. 可通过医院官网、微信公众号或现场窗口预约挂号</p>
          <p style="line-height:1.7;color:#555;margin-bottom:10rpx;">3. 初诊患者请携带身份证、医保卡等有效证件</p>
          <p style="line-height:1.7;color:#555;margin-bottom:10rpx;">4. 专科专家门诊需提前3-7天预约，具体出诊信息以当日公示为准</p>
        </div>
      `
			};
		}
	};
</script>

<style lang="scss" scoped>
	.departments-page {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.departments-container {
		padding: 25rpx;
	}

	// 解决富文本样式穿透问题
	::v-deep .u-parse {

		h1,
		h2,
		h3 {
			font-weight: bold;
		}

		img {
			display: block;
			height: auto;
		}

		ul {
			list-style-type: disc;
		}

		.dept-tabs span {
			transition: all 0.2s ease;
		}

		.dept-tabs span:active {
			background-color: #1976d2;
			color: white;
		}
	}
</style>